<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot></slot>
  </component>
</template>

<script setup lang="ts">
import { isExternal  } from '/@ts/plugins/validate';
import {ref,reactive,defineEmits, onMounted ,
defineProps,computed
} from 'vue';

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

 const props =  defineProps({
  to: {
      type: [String, Object],
      required: true
    }
})
const isExternalTool = computed(() => isExternal(props.to))
const type = computed(() => {
    if(isExternalTool.value){
        return 'a'
    }
     return 'router-link'
})
const linkProps = (to:string) =>{
      if (isExternalTool.value) {
        return {
          href: to,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        to: to
    }
}
</script>

<style  scoped lang="scss" >
a{
  text-decoration: none;
}
</style>
